<template>
  <view  class="ag_container">
    <!-- 页头 -->
    <view class="agree_jn">
      <!-- 步骤条 -->
    <uni-steps :options="[{title: '完善单位信息'}, {title: '核验单位信息'}, {title: '实名认证通过'}]" :active="1" active-color="#00a660"></uni-steps>
      <!-- 对公账户打款 -->
      <view class="authentication_header" style="display:flex;justify-content: space-between;">
        <view>
          <p>认证方式：对公账户打款认证</p>
          <p style="margin-top:5rpx;">认证单位：{{ruleForm.companyName}}</p>
        </view>
          <p class="btnp"><i class="iconfont" style="font-size: 22rpx;margin-right: 5rpx;">&#xe655;</i> 待认证单位打款核验</p>
      </view>

      <view class="authentication_pay">
        <p class="pay_p">付款方：{{ruleForm.companyName}}</p>
 <!--            <p class="pay_p">付款方：<span style="padding-left: 30rpx;">{{ ruleForm.companyName }}</span></p>-->
        <img src="@/static/images/down_pay.png" alt="">
        <p class="pay_p">收款方：励氪签平台</p>
<!--        <p class="pay_p">收款方：<span style="padding-left: 30rpx;">励氪签平台</span></p>-->
      </view>

       <!-- 收款方银行账户信息 -->
        <view class="authentication_header" style="display:flex;justify-content: space-between;align-items: center;">
         <p style="color: #666666;font-size: 28rpx;">收款方（励氪签平台）银行账户信息</p>
         <p size="mini" class="copyMsg" v-clipboard:success="clipboardSuccess" v-clipboard:error="clipboardError"
		 v-clipboard:copy="' 企业对公账户信息：'
		                                        + '\n 账户名称：' + ruleForm.bankName
		                                        + '\n 银行账号：' + ((ruleForm.bankSonName == null) ? '' : ruleForm.bankSonName)
		                                        + '\n 开户银：' + ruleForm.name
		                                        + '\n 打款金额：' + ((ruleForm.account == null) ? '' : ruleForm.account)
		                                        + '\n打款备注：'+ ((ruleForm.account == null) ? '' : ruleForm.account)">复制账号信息</p>
        </view>
        <!-- 账号信息 -->
        <view class="authentication_payCon">
          <p>账户名称：北京如易企服科技有限公司</p>
          <p>银行账号：633917496</p>
          <p>开户银行：中国民生银行股份有限公司北京回龙观支行</p>
          <p>打款金额：0.01元（一分钱）人民币</p>
          <p>打款备注：电子签约实名认证核验</p>
        </view>
        <!-- 打款认证须知 -->
        <view class="authentication_payCon">
          <p style="color: #666666;margin-bottom:16rpx;font-size: 28rpx;">打款认证须知</p>
          <p>（1）打款方必须用当前单位：{{ruleForm.companyName}} 的对公账户进行汇款。</p>
          <p>（2）打款金额必须为0.01元（一分钱），励氪签平台确认到账后，即可完成实名认证。</p>
          <p>（3）打款金额仅作电子签约实名认证核验专用，汇入不做退还、无发票凭证，请贵司知悉。</p>
        </view>
        <!-- 上传付款回单 -->
        <view class="authentication_header" style="color: #666666;font-size:28rpx;">上传付款回单</view>
         <!-- 上传付款回单 -->
          <view class="authentication_payPic">
			  <view>
				  <img-upload ref="uploadRef" :uploadFileUrl="host + '/common/upload'" :text="uploadText" @click="handleUploadSuccess" />
			  </view>
            <p class="img_span">打款后，请上传回单图片，并等待励氪签审核，工作日预计1小时左右通过审核！</p>
          </view>
         <!-- 打款认证须知 -->
        <view class="select_pay">
			<checkbox-group @change="select">
			  <label>
			  <checkbox value="true" color="#00a660" style="transform:scale(0.6)"/>我已理解并同意上述<span class="text-primary">《打款认证须知》</span></label>
			</checkbox-group>
          <p><button class="startBtn" @click="submit" size="mini">立即提交审核</button></p>
        </view>

    </view>
  </view>
</template>

<script>
import config from '@/config'
import {updateSession} from "@/api/ec/person/user/userInfo";
import imgUpload from "@/components/fileUpload/fileEnclosure"
import { addCompanyCertification,  getCertPageRecord, insertCertPageRecord, revokeLegalCert, uploadBusinessLicense
} from "@/api/ec/work/company/companyCertification";
export default {
  components: {imgUpload},
  data() {
    return {
	  host: config.baseUrl,
	  uploadText:'上传付款回单',
	  ruleForm:{},
      confirmselect: '', //认证勾选框
      fileList: [], //上传
	  value:'',
	  id:'',
	  managerType:0, // 0不显示 1企业法定代表人 2企业授权代理人 3企业普通员工
    };
  },
  onLoad(option) {
  	this.id = option.id
  	// managerType 获取上个页面传过来的身份 1企业法定代表人 2企业授权代理人 3企业普通员工 
  	this.managerType = option.managerType;
	this.ruleForm = uni.getStorageSync('ruleForm')
  },
  methods: {
	 /** 协议选择框 */ 
	select(e) {
	  	this.confirmselect = e.detail.value[0]
	},
	clipboardSuccess(){
		this.$modal.msgSuccess("复制成功")
	},
	clipboardError(){
		this.$modal.msgError("复制失败")
	},
    /** 立即提交审核 */
    submit() {
	  console.log(this.fileList)
      if (this.fileList == null) {
		  this.$modal.msgError("请上传付款回单")
		  return;
      } 
	  if (this.confirmselect == '' || this.confirmselect == undefined) {
		  this.$modal.msgError("请勾选打款须知")
		  return;
      } 
	   addCompanyCertification(this.ruleForm).then(() => {}).then(() => {
	    updateSession().then((response) => {
		  this.$store.dispatch('GetInfo').then(res => {})
	     });
	    });
       this.ruleForm.path = "/companyRealname/finish";
       uni.navigateTo({
       url: '/pages/authentication/companyRealname/finish?managerType='+this.managerType+'&id='+this.id
       })
    },
  },
};
</script>

<style lang="scss" scoped>
page{
background: $uni-bg-color;
}
.copyMsg{border: solid 1rpx #a0a0a0;color: #5c5a5a;padding:2rpx 12rpx;border-radius:6rpx;}
	// 上传付款回单
.authentication_payPic{
	margin-top: 30rpx;
	// display: flex;
	.uni-file-picker{
		// width: 100rpx;
		.btn_pay{
			width: 200rpx;
			border: 1rpx solid $uni-color-primary;
			padding: 10rpx;
			background: #fff;
			color: $uni-color-primary;
		}
	}
	.img_span{
		font-size: 20rpx;
		color: #999999;
		padding: 6rpx 10rpx;
		margin-top: 10rpx;
	}
}
	
.authentication_header {
  margin-top:40rpx;
  padding:12rpx 16rpx;
  background-color: #edf7f1;
  font-size: 24rpx;
  .btnp {
    border-radius: 10rpx;
    border: none;
    color: #d81e06;
    font-size: 24rpx;
    background-color: #edf7f1;
  }
}
  .authentication_pay {
    font-size: 28rpx;
    text-align: center;
	margin-top: 40rpx;
    .pay_p {
      background-color: #faf2e9;
      padding: 12rpx 0;
      border: 1rpx solid #faf2e9;
    }
	img{
		width: 280rpx;
		height:200rpx;
	}
  }
  .authentication_payCon {
    color: #999999;
    padding: 20rpx 0;
    p {
      margin: 0;
      font-size: 24rpx;
      padding: 1rpx 0;
    }
  }

.ag_container {
  position: relative;
  overflow: hidden;
  padding-bottom:calc(24rpx +  constant(safe-area-inset-bottom));
  padding-bottom:calc(24rpx +  env(safe-area-inset-bottom));
}
.agree_jn {
  margin-top: 40rpx;
  padding: 0 30rpx;
  position: relative;
 
}
  .select_pay {
    color: #999999;
	margin:80rpx 0;
	// 开始认证btn
	 .startBtn {
	   background-color: $uni-color-primary;
	   color: #fff;
	   width: 100%;
	   font-size:34rpx;
	 }
  }
</style>
